<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="txt">
    <button id="btn1">请求商品</button>
    <button id="btn2">请求品牌</button>
</body>
<script>
    // - 接口地址：http://icodeilife.club:3000/api/pro/search
    // - 请求方式：get
    // - 请求数据：sKey，要搜索的关键字
    // - 响应数据类型：json
    // - 响应数据内容：{"code": 200,"title": "请求成功","msg":[数据]}


    // - 接口地址：http://icodeilife.club:3000/api/pro/brand
    // - 请求方式：get
    // - 请求数据：kindKey，要请求的品牌的分类信息
    // - 响应数据类型：json
    // - 响应数据内容：{"code": 200,"title": "请求成功","msg":[数据]}


    const btn1 = document.getElementById("btn1");
    const btn2 = document.getElementById("btn2");
    const txt = document.getElementById("txt")

    btn1.onclick = function(){
        ajax({
            type:"get",
            url:"http://icodeilife.club:3000/api/pro/search",
            success:res=>{
                console.log(res);
            },
            error:err=>{
                console.log(err);
            },
            data:{
                sKey: txt.value
            },
            timeout: 10
        })
    }

    btn2.onclick = function(){
        
    }

    // ajax2.0执行规划
    // ajax({
    //     type:"get",
    //     url:"http://icodeilife.club:3000/api/pro/search",
    //     success:res=>{
    //         console.log(res);
    //     },
    //     error:err=>{
    //         console.log(res);
    //     },
    //     data:{
    //         sKey: txt.value
    //     },
    //     timeout: 1000
    // })
    
    // 唯一的参数为对象，内包含以下选项：
        // 1. type请求方式，字符，可选，默认get，可选post
        // 2. url请求地址，字符，必传
        // 3. success请求成功后的回调函数，必传，函数
        // 4. error请求失败后的回调函数，可选，函数，默认不处理失败
        // 5. data请求数据，可选，对象，默认为{}空对象
        // 6. timeout超时时间，可选，数值毫秒数，默认为500

    function ajax(ops = {}){
        // 1. 解析参数并处理默认值
        // const data = ops.data ? ops.data : {}
        // const data = ops.data || {}
        let {data={}, type="get", url, success, error, timeout=500} = ops;

        // 2. 解析并处理数据：key=val;&key=val
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }

        // 3. 根据请求方式决定是否拼接到url
        if(type === "get"){
            url += "?" + str.slice(0, -1);
        }

        // 4. 开启ajax发起请求
        const xhr = new XMLHttpRequest();
        xhr.open(type, url);
        // 5. 根据请求方式，决定发送时是否携带数据
        if(type === "post"){
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(str.slice(0,-1));
        }else{
            xhr.send();
        }
        xhr.onreadystatechange = function(){
            // 6. ajax状态改变事件触发时，执行成功或失败的回调函数并传递数据
            if(xhr.readyState === 4 && xhr.status === 200){
                success && success(xhr.responseText);
                // 成功后，不允许再有超时
                clearTimeout(t);
            }else if(xhr.readyState === 4 && xhr.status !== 200){
                // if(error){
                //     error(xhr.status);
                // }
                error && error(xhr.status);
                // 失败后，不允许再有超时
                clearTimeout(t);
            }
        }

        // 7. 根据超时事件，设置超时后的失败提示
        const t = setTimeout(()=>{
            error && error("timeout");
            // 超时后，不允许在有成功或失败
            error = undefined;
            success = undefined;
        }, timeout);
    }



    // 逻辑短路
    // 或：如果前一个是false值，取后一个，无论后一个是true还是false
    // 或：如果前一个是true值，直接取前一个，无论后一个是true还是false
    // console.log(1 || 2)
    // console.log(0 || 2)
    // console.log(0 || false)
    // console.log(false || 0)

    // 且：如果前一个是true值，取后一个，无论后一个是true还是false
    // 且：如果前一个是false值，直接取前一个，无论后一个是true还是false
    // console.log(1 && 2)
    // console.log(false && 0)
    // console.log(0 && false)

    // var a = undefined;
    // var b = function(){}
    // var c = "hello";

    // console.log(a && b)
    // console.log(c && b)
    // console.log(c && b())





</script>
</html>